<template>
	<div class="examContianer">
		<div class="question" @touchmove.prevent>
			<swiper class="mySwiper" :current='curIndex' @change='curIndex = $event.detail.current'>
				<swiper-item v-for="(swiper,index) in questionList" :key="index">
					<div class='swiperItem'>
						<!-- 题干 -->
						<div class="title">
							<p>
								<!-- 题型 -->
								<span class='questionType'>
									{{ handleType(swiper.questionType) }}
								</span>
								<!-- 题干 -->
								<span style='padding-left: 8px;'>
									{{ swiper.info }}
								</span>
							</p>

						</div>
						<!-- 选项 -->
						<div class="answerBody">
							<!-- 单选 -->
							<u-radio-group v-if="swiper.questionType === 1" v-model="swiper.answer" placement="column">
								<div @click='swiper.answer=item.id' class='myRadio'
									v-for="(item, index) in swiper.answerList" :key="index">
									<u-radio :customStyle="{marginBottom: '8px'}" label="" :name="item.id">
									</u-radio>
									<span class='zimu'>{{ handleLabel(index) }}</span>
									<span class='optionInfo'>{{ item.info }}</span>
								</div>
							</u-radio-group>
							<!-- 多选 -->
							<u-checkbox-group v-if="swiper.questionType === 2" v-model="swiper.answer"
								placement="column">
								<div @click='checkBoxClick(swiper,item)' class='myRadio'
									v-for="(item, index) in swiper.answerList" :key="index">
									<u-checkbox :customStyle="{marginBottom: '8px'}" :name="item.id">
									</u-checkbox>
									<span class='zimu'>{{ handleLabel(index) }}</span>
									<span class='optionInfo'>{{ item.info }}</span>
								</div>
							</u-checkbox-group>
							<!-- 判断 -->
							<u-radio-group v-if="swiper.questionType === 3" v-model="swiper.answer" placement="column">
								<div @click='swiper.answer=item.id' class='myRadio'
									v-for="(item, index) in swiper.answerList" :key="index">
									<u-radio :customStyle="{marginBottom: '8px'}" label="" :name="item.id">
									</u-radio>
									<span class='judge'>{{ index === 0 ? '正确' : '错误' }}</span>
								</div>
							</u-radio-group>
						</div>
						<!-- 解析 -->
						<div class='analysis' v-if="showAnalysis">
							<div class="right">答题正确！</div>
							<div class="error">
								<span>答题错误</span>
								<span>,</span>
								<span>正确答案</span>
								<span>:</span>
								<span>D</span>
							</div>
						</div>
						<!-- 按钮 -->
						<div class="btns">
							<u-button v-if="examModel !== 'exam'"
								color='linear-gradient(to right, rgb(102, 219, 230), rgb(60, 134, 238))'
								class="custom-style" text="确认答案"></u-button>
							<u-button v-else color='#f56c6c' class="custom-style" text="提交考试"></u-button>
						</div>
					</div>
				</swiper-item>
			</swiper>
		</div>

		<!-- 底部 -->
		<div :class="[examModel === 'exam' ? 'footer examFooter' :  'footer']">
			<!-- 收藏 -->
			<div class="collect" @click='collectChange' v-if="examModel !== 'exam'">
				<u--image :src="curExam.isCollect ? icons.collect : icons.no_collect" width="24px" height="24px">
				</u--image>
				<div class="text">{{ curExam.isCollect ? '点击收藏' : '取消收藏' }}</div>
			</div>
			<!-- 对错统计 -->
			<div class='statistics' v-if="examModel === 'test'">
				<div class="error">
					<u--image :src="icons.right" width="24px" height="24px"></u--image>
					<div class="text">{{ rightNums }}</div>
				</div>
				<div class="right">
					<u--image :src="icons.error" width="24px" height="24px"></u--image>
					<div class="text">{{ errorNums }}</div>
				</div>
			</div>
			<!-- 清空错题 -->
			<div class='clearError' v-if="examModel === 'error'">
				<u--image :src="icons.del" width="24px" height="24px"></u--image>
				<div class="text">清空错题</div>
			</div>
			<!-- 右侧 -->
			<div class="tip" @click='showPopup = true'>
				<u--image mode='aspectFit' :src="icons.list" width='40px' height="24px"></u--image>
				<div class="text">{{ curIndex + 1 }}<span style='color:#ccc;padding-left: 4px;'>
						/{{ questionList.length }}</span>
				</div>
			</div>
		</div>

		<!-- 弹层 -->
		<u-popup :round="14" mode='bottom' :show="showPopup" @close="showPopup = false">
			<view class="footer innerPopup">
				<div :class="[ examModel === 'exam' ? 'header flexRow' : 'header' ]">
					<!-- 收藏 -->
					<div class="collect" @click='collectChange' v-if="examModel !== 'exam'">
						<u--image :src="curExam.isCollect ? icons.collect : icons.no_collect" width="24px"
							height="24px">
						</u--image>
						<div class="text">{{ curExam.isCollect ? '点击收藏' : '取消收藏' }}</div>
					</div>
					<!-- 右侧 -->
					<div class="tip" @click='showPopup = false'>
						<u--image mode='aspectFit' :src="icons.list" width='40px' height="24px"></u--image>
						<div class="text">{{ curIndex + 1 }}<span style='color:#ccc;padding-left: 4px;'>
								/{{ questionList.length }}</span>
						</div>
					</div>
				</div>
				<div class="body">
					<u-grid col="7" :border="false">
						<u-grid-item @click="itemClick(question,index)" v-for="(question,index) in questionList"
							:key="index">
							<div
								:class="['nums', curIndex === index ? 'active' : '',question.answer !== null ? 'finish' :'']">
								{{ index + 1 }}
							</div>
						</u-grid-item>
					</u-grid>
				</div>
			</view>
		</u-popup>
	</div>
</template>

<script>
	import {
		getTimeStr
	} from './utils.js'
	import collect from './icons/star_gray.png'
	import no_collect from './icons/star_red.png'
	import error from './icons/error.png'
	import right from './icons/right.png'
	import list from './icons/list.png'
	import del from './icons/del.png'
	export default {
		props: {
			// 试题类型 exam(考试) test(练习) error(错题联系)
			examModel: {
				type: String,
				default: () => 'error'
			},
			questionList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				curIndex: 0, // 当前系数
				curExam: {
					isCollect: true, // 是否收藏
					isFinish: true, // 是否做完
				},
				showAnalysis: false, // 展示解析
				showPopup: false, // 题干弹层
				timer: 7200, // 倒计时s
			}
		},
		computed: {
			rightNums() {
				return this.questionList.filter(x => {
					return x.answer !== null && x.answerRightId === x.answer
				}).length
			},
			errorNums() {
				return this.questionList.filter(x => {
					return x.answer !== null && x.answerRightId !== x.answer
				}).length
			},
			icons() {
				return {
					collect,
					no_collect,
					error,
					right,
					list,
					del
				}
			},
			timeStr() {
				return '倒计时 ' + getTimeStr(this.timer)
			},
		},
		created() {
			if (this.examModel === 'exam') {
				this.startTime()
			}
		},
		onBackPress() {
			this.setIntervalId && clearInterval(this.setIntervalId)
		},
		methods: {
			checkBoxClick(swiper, item) {
				const arr = swiper.answer = swiper.answer || []
				const index = arr.findIndex(x => x === item.id)
				console.log(index, 'index');
				if (index > -1) {
					arr.splice(index, 1)
				} else {
					arr.push(item.id)
				}
				console.log(arr, 'arrr');

			},
			curIndexChange(e) {
				console.log(e, 'dddd');
			},
			itemClick(data, index) {
				this.curIndex = index
				this.showPopup = false
			},
			// 点击收藏(取消收藏)
			collectChange() {
				uni.showLoading({
					title: this.curExam.isCollect ? '收藏中' : '取消中'
				})
				setTimeout(() => {
					uni.hideLoading()
					this.curExam.isCollect = !this.curExam.isCollect
				}, 500)
			},
			handleLabel(index) {
				const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
				return arr[index]
			},
			handleType(type) {
				const arr = ['', '单择题', '多选题', '判断题']
				return arr[type]
			},
			// 考试时间到
			timeOver() {
				console.log('考试结束');
			},
			// 开始计时
			startTime() {
				// 设置标题
				const setTitle = (str) => {
					uni.setNavigationBarTitle({
						title: str
					});
				}
				setTitle(this.timeStr)
				this.setIntervalId && clearInterval(this.setIntervalId)
				this.setIntervalId = setInterval(() => {
					if (this.timer > 0) {
						this.timer--
					} else {
						clearInterval(this.setIntervalId)
						// 考试时间到
						this.timeOver()
					}
					setTitle(this.timeStr)
				}, 1000)

			}
		},
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.examContianer {
		width: 100%;
		height: 100%;

		.question {
			width: 100%;
			height: calc(100% - 44px);
			overflow-y: auto;
		}

		.footer {
			width: 100%;
			height: 44px;
			display: flex;
			background-color: #fff;
			padding: 0 12px;
			align-items: center;
			justify-content: space-between;

			.collect {
				cursor: pointer;
			}

			.collect,
			.clearError,
			.statistics,
			.tip {
				display: flex;

				.right {
					display: flex;
					align-items: center;
					padding-left: 12px;
				}

				.error {
					align-items: center;
					display: flex;
				}

				.text {
					display: flex;
					align-items: center;
					padding: 0 4px;
					font-size: 14px
				}
			}


		}

		.examFooter {
			flex-direction: row-reverse;
		}

		.answerBody {
			padding: 12px 0;
		}

		.innerPopup {
			background-color: transparent;
			padding: 12px;
			padding-bottom: 0px;
			height: auto;
			display: block;

			.header {
				display: flex;
				justify-content: space-between;
				padding-bottom: 12px;
			}

			.flexRow {
				justify-content: flex-end;
			}

			.body {
				min-height: 120px;
				max-height: 60vh;
				overflow-y: auto;

				.active {
					color: #409eff !important;
					border-color: #409eff !important;
					background-color: transparent !important;
				}

				.finish {
					color: #fff;
					border-color: #42b983;
					background-color: #42b983;
				}
			}
		}

		.nums {
			width: 36px;
			height: 36px;
			border: 1px solid #eee;
			border-radius: 50%;
			text-align: center;
			line-height: 36px;
			margin-bottom: 12px;
		}

		.mySwiper {
			height: 100%;
		}

		.swiperItem {
			width: 100%;
			height: 100%;
			padding: 12px;
			font-size: 14px;
			background-color: #f3f8fb;
			position: relative;
			padding-bottom: 64px;

			.btns {
				position: absolute;
				bottom: 0;
				height: 64px;
				line-height: 64px;
				width: calc(100% - 24px);
			}

			.questionType {
				display: inline-block;
				padding: 4px 6px;
				color: #fff;
				background-color: #47abfa;
				border-radius: 8px 8px 8px 0;
			}
		}
	}

	uni-swiper-slides {
		height: 100%;
	}



	.myRadio {
		display: flex;
		padding-bottom: 8px;


		.u-radio,
		.u-checkbox {
			width: 20px;
			align-items: baseline !important;
			padding-top: 2px;
		}

		.zimu,
		.judge {
			width: 24px;
			height: 24px;
			text-align: center;
			line-height: 24px;
			margin: 0 8px 0 4px;
			display: inline-block;
			border-radius: 50%;
			background-color: #fff;
		}

		.judge {
			width: 100px;
			border-radius: unset;
			padding-left: 4px;
			background-color: transparent;
			text-align: left;
		}

		.optionInfo {
			padding-top: 2px;
			flex: 1;
		}
	}
</style>
